<template>
  <div class="card content-box">
    <span class="text">信访处理</span>
    <el-table :data="petitions" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="信访人" prop="userID"></el-table-column>
      <el-table-column label="主题" prop="title"></el-table-column>
      <el-table-column label="一级分类" prop="eventType"></el-table-column>
      <el-table-column label="部门" prop="petitionDep"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <!--<el-icon><Promotion /></el-icon>-->
          <el-button type="primary" @click="choose(row)" :icon="Edit" circle></el-button>
          <el-button type="success" @click="trans(row)" :icon="Promotion" circle></el-button>
          <el-button type="warning" @click="delay(row)" :icon="Clock" circle></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>

    <!--直接回复弹窗-->
    <el-dialog v-model="show_reply" width="40%">
      <el-form label-width="130px" style="padding-right: 30px">
        <el-form-item label="事件码">
          {{ petition.eventID }}
        </el-form-item>
        <el-form-item label="信访标题">
          {{ petition.title }}
        </el-form-item>
        <el-form-item label="信访内容">
          {{ petition.description }}
        </el-form-item>
        <el-form-item label="回复">
          <el-input v-model="context" style="width: 240px" :rows="4" type="textarea" placeholder="输入回复内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show_reply = false">取消</el-button>
          <el-button type="primary" @click="sure"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!--延迟处理弹窗-->
    <el-dialog v-model="show_delay" width="40%">
      <el-form label-width="130px" style="padding-right: 30px">
        <el-form-item label="事件码">
          {{ petition.eventID }}
        </el-form-item>
        <el-form-item label="信访标题">
          {{ petition.title }}
        </el-form-item>
        <el-form-item label="信访内容">
          {{ petition.description }}
        </el-form-item>
        <el-form-item label="延迟原因">
          <el-input v-model="reason" style="width: 240px" :rows="4" type="textarea" placeholder="输入延迟原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show_delay = false">取消</el-button>
          <el-button type="primary" @click="delay1"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--直接回复弹窗-->
    <el-dialog v-model="add_ins" width="40%">
      <el-form label-width="130px" style="padding-right: 30px">
        <el-form-item label="事件码">
          {{ petition.eventID }}
        </el-form-item>
        <el-form-item label="信访标题">
          {{ petition.title }}
        </el-form-item>
        <el-form-item label="信访内容">
          {{ petition.description }}
        </el-form-item>
        <el-form-item label="回复">
          <el-input v-model="textarea" style="width: 240px" :rows="4" type="textarea" placeholder="输入回复内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show_reply = false">取消</el-button>
          <el-button type="primary" @click="sure"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--转送弹窗-->
    <el-dialog v-model="show_tran" width="40%">
      <el-form label-width="130px" style="padding-right: 30px">
        <el-form-item label="事件码">
          {{ petition.eventID }}
        </el-form-item>
        <el-form-item label="信访标题">
          {{ petition.title }}
        </el-form-item>
        <el-form-item label="信访内容">
          {{ petition.description }}
        </el-form-item>
        <el-form-item label="转送人员编码">
          <el-input v-model="id" style="width: 240px" :rows="1" type="textarea" placeholder="输入人员编码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show_tran = false">取消</el-button>
          <el-button type="primary" @click="tran"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--处理结果弹窗-->
    <el-dialog v-model="show_recorder" width="40%">
      <el-form label-width="130px" style="padding-right: 30px">
        <el-form-item label="事件码">
          {{ petition.eventID }}
        </el-form-item>
        <el-form-item label="信访标题">
          {{ petition.title }}
        </el-form-item>
        <el-form-item label="回复时间">
          {{ recorder.CreatedAt }}
        </el-form-item>
        <el-form-item label="回复内容">
          {{ recorder.ReplyContent }}
        </el-form-item>
        <el-form-item label="处理人员编码">
          {{ phoneStore.phone }}
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="show_recorder = false"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="copyDirect">
import { onMounted, ref } from "vue";
import { getWorkerTaskService, delayService, tranService, replyPetitionService, finishService } from "@/api/core/funcs";
import { Edit, Clock, Promotion } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { usePhoneStore } from "@/stores/phone";
//弹窗展示
const show_reply = ref(false);
const show_recorder = ref(false);
const show_tran = ref(false);
const show_delay = ref(false);
//工号
const store = usePhoneStore();
//回复表单
const context = ref();
//延迟原因
const reason = ref("");
//转送人
const id = ref(null);
//数据类型
const petitions = ref([
  {
    eventID: 1,
    eventType: 1,
    typeName: "",
    userID: 10000000,
    title: "关于程序员每天996的问题",
    description: "hhh",
    petitionDep: "重庆市江北区信访办",
    status: 1,
    statusName: "",
    createdAt: "2024-07-11 20:11:12",
    filePath: "http://www.baidu.com",
    keywords: null,
    workId: null,
    sentiment: 0.06916084606459039,
    degree: 5.0
  }
]);

const petition = ref({
  eventID: 1,
  eventType: 1,
  typeName: "",
  userID: 10000000,
  title: "关于程序员每天996的问题",
  description: "hhh",
  petitionDep: "重庆市江北区信访办",
  status: 1,
  statusName: "",
  createdAt: "2024-07-11 20:11:12",
  filePath: "http://www.baidu.com",
  keywords: null,
  workId: null,
  sentiment: 0.06916084606459039,
  degree: 5.0
});

//处理结果显示
const recorder = ref({
  EventID: "EV789012",
  ReplyContent: "感谢您的反馈，我们已经注意到您的问题，并将在5个工作日内给出答复。",
  CreatedAt: "2024-07-11T09:00:00"
});

//获取职员所有信访
const getDataList = async () => {
  let result = await getWorkerTaskService(store.phone);
  petitions.value = result.data;
};
onMounted(getDataList);
//处理部分

//转送
const trans = async row => {
  show_tran.value = true;
  petition.value = row;
};
const tran = async () => {
  let Data = {
    eventId: petition.value.eventID,
    workId: id.value
  };
  await tranService(Data);
  ElMessage.warning("事件已转送至" + id.value);
  show_tran.value = false;
};

//直接回复
const choose = row => {
  petition.value = row;
  show_reply.value = true;
};
const sure = async () => {
  let Data = {
    eventId: petition.value.eventID,
    replyContent: context.value
  };
  let Data2 = {
    eventId: petition.value.eventID,
    resultDetails: context.value
  };
  let result = await replyPetitionService(Data);
  recorder.value = result.data;
  await finishService(Data2);
  ElMessage.success("处理完成");
  show_reply.value = false;
  show_recorder.value = true;
};

//延迟处理
const delay = row => {
  petition.value = row;
  show_delay.value = true;
};

const delay1 = async () => {
  let Data = {
    eventId: petition.value.eventID,
    reason: reason.value
  };
  await delayService(Data);
  ElMessage.success("事件已延迟");
  show_delay.value = false;
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
